<template>
    <li>
        <div class="shownew">
            <i v-if="hasChild"
               class="iconfont"
               @click="toggle(model)"
               v-bind:class="[open ? 'icon-jinru iconfontss': 'icon-jinru']"></i>
            <i v-if="!hasChild"
               class="icon file-text"
               @click="toggle(model)"></i>
            <span @click="changemsg(model)"
                  class="newmsgclass">{{model.Name}}</span>
        </div>
        <ul v-show="open"
            v-if="hasChild"
            class="showul">
            <treemenu v-for="(item,index) in model.Children"
                      :name="name"
                      v-bind:model="item"
                      v-bind:key="index"></treemenu>
        </ul>

    </li>
</template>

<script>
import { Checker, CheckerItem } from 'vux'
export default {
    name: 'treemenu',
    props: ['model', 'name', 'type', 'showCheckBox'],
    components: { Checker, CheckerItem },
    data () {
        return {
            open: false,
            index: 0,
            memberWork: '',
            tree: null,
            peosonlist: [],
            depart: this.model
        }
    },
    computed: {
        hasChild () {
            return this.model.Children && this.model.Children.length
        }
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.userId = this.userInfo.userid
        this.tokenId = this.userInfo.tokenId
        this.projectId = this.userInfo.deptid
        this.business = this.$route.query.business || 'GetHdProjects'
        const parent = this.$parent
        if (!parent.isTree) {
            this.tree = parent.tree
        } else {
            this.tree = parent
        }
        this.depart.users = []
    },
    mounted () {
        this.type = this.$route.query.type
        this.memberWork = this.$route.query.memberWork
        this.index = this.$route.query.index
    },
    methods: {
        toggle () {
            if (this.hasChild) {
                this.open = !this.open
            } else {
                localStorage.baseList = JSON.stringify(this.model)
                this.$store.state.checkcompany = this.model

                this.$router.back()
            }
        },
        changemsg (data) {
            let that = this
            let param = {
                allowPaging: true,
                business: 'getPersonPage',
                data: {
                    Identity: '',
                    Name: '',
                    departId: data.Id
                },
                pageIndex: 0,
                pageSize: 20,
                tokenId: this.tokenId,
                userId: this.userId
            }
            this.$axiosAjax
                .getConfigJson(param)
                .then(res => {
                    if (res.data.info == '成功') {
                        if (res.data.count > 0) {
                            that.$nextTick(function () {
                                that.depart.users = res.data.data
                                this.$forceUpdate()
                            })
                        }
                    }
                })
                .catch(err => { })
        },
        selectUser (data) {
            this.tree.$emit('selectUser', data)
        },
        peopleselect (id) {
            this.$axiosAjax.getUserList({ departId: this.model.id }).then((res) => {
                this.$vux.loading.hide()
                if (res.data.success == true) {
                    if (res.data.result.totalCount > 0) {
                        console.log(res.data.result)
                        this.peosonlist = res.data.result.items
                    }
                }
            }).catch(
                (err) => {

                }
            )
        }
    }
}
</script>

<style>
.showul {
    list-style: none;
    padding-left: 20px;
}
.showul:last-child {
}
li {
    padding: 3px 0;
}
li:first-child {
}
li > span {
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
}

i.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.icon.folder {
}

.icon.folder-open {
}

.icon.file-text {
}

.tree-menu li {
    line-height: 3;
}
.iconfont {
    margin-right: 5px;
}
.iconfont.iconfontss {
    display: inline-block;
    transform: rotate(90deg);
}
.shownew {
    overflow: hidden;
    height: 40px;
    padding-right: 20px;
    display: flex;
    align-items: center;
}
.newmsgclass {
    display: inline-block;
    /* height: 100%; */
    vertical-align: middle;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
}
</style>
